<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./style/rain.css">
</head>
<body>
  <div class="content">
     <div class="yudi"></div>
  </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script>
  let $content =$('.content');
  let  initNumber = 0;
  for(let i=0; i<30; i++){
    let lefts =(Math.floor(Math.random()*5 +2)) //表示0-7之间
    let delay = Math.floor(Math.random()*50 +2)//定义延迟
    initNumber += lefts;
    let $div = $('<div/>').addClass('yudi').css({
      "left":`${initNumber}%`,
      "top": `${lefts}%`,
      "animation-delay": `${delay/10}s`
    });
    $content.append($div);
  }
</script>
</html>